<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>录像回放</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/icon/iconfont.css">
    <style>
        html,
        body,
        #container,
        .full {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        body {
            overflow: hidden;
        }
        
        .col-cls {
            text-align: center;
            line-height: 32px;
        }
        
        .row-cls {
            margin-bottom: 10px;
        }
        
        video {
            object-fit: fill;
            width: 100%;
            height: 100%;
        }
        
        #videoContent>div {
            float: left;
        }
        
        div.player-state-tip {
            position: absolute;
            left: 10px;
            bottom: 75px;
            background-color: rgba(255, 0, 0, 0.3);
            padding: 0px;
            color: white;
            font-size: 10px;
        }
        
        div.resolving-power {
            position: absolute;
            right: 2px;
            top: 2px;
            color: red;
        }
        
        div.player-ctrl {
            position: absolute;
            right: 0px;
            bottom: 0px;
            height: 35px;
            line-height: 35px;
            background-color: #000000;
            color: white;
            font-size: 10px;
            padding: 0 5px;
        }
        
        div.player-ctrl>div {
            float: left;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            cursor: pointer;
        }
        
        div.time-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        
        .mask {
            position: absolute;
            left: 18px;
            right: 13px;
            top: 10px;
            bottom: 44px;
        }
        
        .time-reminder {
            position: absolute;
            padding: 3px;
            color: #ffffff;
            background-color: #0071C6;
            top: 0px;
            left: 0px;
        }
        
        .time-line {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #0071C6;
        }
        
        .mask-wrapper {
            position: absolute;
            right: 0px;
            bottom: 0px;
            top: 0px;
            left: 0px;
            z-index: 9999;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loader-05 {
            width: 50px;
            height: 50px;
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            position: relative;
        }
        
        .loader-05:before {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.2em;
            left: -.2em;
            border: .2em solid currentcolor;
            border-radius: 50%;
            opacity: .5;
        }
        
        #videoContent {
            position: relative;
            background-image: url('./images/tv_default.jpg');
            background-size: cover;
        }
        
        @-webkit-keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        @keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        .text-tip {
            position: absolute;
            bottom: -25px;
            left: -20px;
            right: -20px;
            text-align: center;
        }
        
        div.spin-wraper {
            position: absolute;
            left: 0px;
            top: 0px;
            right: 00px;
            bottom: 0px;
            z-index: 999;
            display: inline-block;
            background: rgba(0, 0, 0, 0.5);
        }
        
        #container .ivu-spin-fix {
            background-color: rgba(255, 255, 255, 0.1);
        }
    </style>
</head>

<body>
    <canvas width="720" height="450" id="V2I_canvas" style="display: none;"></canvas>
    <div class="mask-wrapper" id="mask-wrapper">
        <div class="box" style="position:relative;">
            <div class="loader-05"></div>
        </div>
    </div>
    <div id="container">
        <video ref='audio' style="display: none;" :muted="isMute"></video>
        <div class="spin-wraper" v-if="isSpin" style="z-index:10">
            <Spin fix size="large"></Spin>
        </div>
        <Layout style="height:100%;">
            <Layout>
                <Sider hide-trigger width="260" style="background-color:#ffffff;padding:10px;">
                    <div class="full">
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('alarm.devName')}}:
                            </i-Col>
                            <i-Col span="18" style="line-height: 32px;">
                                <span v-text="devicename"></span>
                            </i-Col>
                        </Row>
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('alarm.devNum')}}:
                            </i-Col>
                            <i-Col span="18" style="line-height: 32px;">
                                <span v-text="deviceid"></span>
                            </i-Col>
                        </Row>
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('videoback.channelNumber')}}:
                            </i-Col>
                            <i-Col span="18">
                                <i-select v-model="selectType">
                                    <i-option value="1">CH1</i-option>
                                    <i-option value="2">CH2</i-option>
                                    <i-option value="3">CH3</i-option>
                                    <i-option value="4">CH4</i-option>
                                    <i-option value="5">CH5</i-option>
                                    <i-option value="6">CH6</i-option>
                                    <i-option value="7">CH7</i-option>
                                    <i-option value="8">CH8</i-option>
                                </i-select>
                            </i-Col>
                        </Row>
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('videoback.selectDate')}}:
                            </i-Col>
                            <i-Col span="18">
                                <Date-Picker type="date" :placeholder="$t('videoback.selectDate')" style="width:100%" v-model="date"></Date-Picker>
                            </i-Col>
                        </Row>
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('videoback.timeFrame')}}:
                            </i-Col>
                            <i-Col span="18">
                                <Time-Picker confirm type="timerange" placement="bottom-end" style="width:100%;" v-model="timeRange" @on-clear="onClearTime"></Time-Picker>
                            </i-Col>
                        </Row>
                        <Row class="row-cls">
                            <i-Col span="6" class="col-cls">
                                {{$t('videoSettings.streamType')}}:
                            </i-Col>
                            <i-Col span="18">
                                <i-select v-model="streamType">
                                    <i-option value="0">{{$t('monitor.all')}}</i-option>
                                    <i-option value="1">{{$t('videoSettings.mainStream')}}</i-option>
                                    <i-option value="2">{{$t('videoSettings.subStream')}}</i-option>
                                </i-select>
                            </i-Col>
                        </Row>
                        <div>
                            <Row>
                                <i-Col span="16" style="line-height:32px;height:32px;">{{$t('videoback.storageType')}}</i-Col>
                            </Row>
                            <div style="padding-left:30px;">
                                <Radio-Group v-model="storageType" vertical>
                                    <Radio label="mainAndBackupStore">
                                        <span>{{$t('videoback.mainAndspare')}}</span>
                                    </Radio>
                                    <Radio label="mainstore">
                                        <span>{{$t('videoback.mainMemory')}}</span>
                                    </Radio>
                                    <Radio label="backupstore">
                                        <span>{{$t('videoback.spareMemory')}}</span>
                                    </Radio>
                                </Radio-Group>
                            </div>
                        </div>

                        <div>
                            <Row>
                                <i-Col span="6" class="col-cls">{{$t('videoback.videoType')}}</i-Col>
                            </Row>
                            <Row>
                                <i-Col span="24" style="padding-left:30px;">
                                    <Radio-Group v-model="mediatype">
                                        <Radio label="all">
                                            <span>{{$t('videoback.all')}}</span>
                                        </Radio>
                                        <Radio label="video">
                                            <span>{{$t('videoSettings.video')}}</span>
                                        </Radio>
                                        <Radio label="audio">
                                            <span>{{$t('videoSettings.audio')}}</span>
                                        </Radio>
                                    </Radio-Group>
                                </i-Col>
                            </Row>
                        </div>
                        <div style="margin-top:30px;">
                            <Row>
                                <i-col span="18" offset="3">
                                    <i-button style="width:100%;" type="primry" @click="queryMedia" :loading="loading">{{$t('videoback.search')}}</i-button>
                                </i-col>
                            </Row>
                        </div>

                        <Modal v-model="modal" :title="$t('videoback.segmentDownload')" width="460">
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.startDate')}} :
                                </i-col>
                                <i-col span="8">
                                    <i-input :value='dateStr' disabled style="width: 100%;" />
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.startTime')}} :
                                </i-col>
                                <i-col span="8">
                                    <Time-Picker type="time" v-model="startValue" style="width: 100%;" disabled></Time-Picker>
                                </i-col>
                                <i-col span="11" offset="1" style="height:35px;line-height:35px;color:red;">
                                    <span> ( >= {{startVideoTime}} )</span>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.endTime')}} :
                                </i-col>
                                <i-col span="8">
                                    <Time-Picker type="time" v-model="endValue" style="width: 100%;" disabled></Time-Picker>
                                </i-col>
                                <i-col span="11" offset="1" style="height:35px;line-height:35px;color:red;">
                                    <span>( <= {{endVideoTime}} )</span>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.selectionDuration')}} :
                                </i-col>
                                <i-col span="8" style="height:35px;line-height:35px;">
                                    {{timeStamp}}
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.timeFrame')}} :
                                </i-col>
                                <i-col span="16">
                                    <Slider v-if="showSlider" v-model="sliderValue" ref="slider" range @on-change="onSliderChange" :tip-format="tipFormat"></Slider>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="4" style="height:35px;line-height:35px;">
                                    {{$t('videoback.label')}} :
                                </i-col>
                                <i-col span="8">
                                    <i-input v-model="tag"></i-input>
                                </i-col>
                            </Row>

                            <div slot="footer">
                                <i-button style="width: 100%" type="primary" @click='splitUploadFile'>{{$t('videoback.download')}}</i-button>
                            </div>
                        </Modal>
                    </div>
                </Sider>
                <div style="padding:10px;position: absolute;left: 260px;top:0px;right: 0;bottom: 0;overflow: hidden">
                    <div class="full" style="position:relative;">
                        <div style="position: absolute;left: 0px;top:0px;right: 0;bottom: 300px;" id="videoElementWrap">
                            <div class="full" id="videoContent" ref="videoContent">
                                <video id="videoElement" style="width:100%;height: 100%;">Your browser is too old which doesn't support HTML5 video.</video>
                            </div>
                            <div class="player-state-tip" v-show="playerStateTip!=''">
                                <div>
                                    <span v-text="playerStateTip"></span>
                                    <span v-text="networkSpeed"></span>
                                </div>
                            </div>
                            <div class="resolving-power">
                                <span v-text='resolvingPower.width'></span> *
                                <span v-text='resolvingPower.height'></span>
                            </div>
                            <div class="player-ctrl">
                                <div @click="stopVideo">
                                    <span><i class="icon iconfont icon-zanting"></i></span>
                                </div>
                                <div @click="switchAudio">
                                    <span><i class="icon iconfont" :class="{'icon-yinliang':!isMute,'icon-guanbiyinliang':isMute}"></i></span>
                                </div>
                                <div @click="flv_photograph">
                                    <span><i class="icon iconfont icon-camera"></i></span>
                                </div>
                                <div @click="handleFullScreen">
                                    <span><i class="icon iconfont" :class="{'icon-quanping':!isFullScreen,'icon-tuichuquanping':isFullScreen}"></i></span>
                                </div>
                            </div>
                        </div>
                        <div style="height:300px;position: absolute;bottom: 0;left: 0;right: 0;padding-top: 10px;">
                            <Tabs type="card" v-model="isTable">
                                <tab-pane :label="$t('videoback.time')" name="time">
                                    <div class="time-wrapper">
                                        <div id="videoTime" style="width:100%;height:250px;"></div>
                                        <div class="mask" @click="handleClickMask" ref="videoTimeMask" @mousemove="onMouseMove">
                                            <div class="time-line" :style='timeLineElStyle'></div>
                                            <span class="time-reminder" :style='timeReminderElStyle' v-text="timeReminder"></span>
                                        </div>
                                    </div>
                                </tab-pane>
                                <tab-pane :label="$t('videoback.file')" name="file">
                                    <i-table border ref="table" @on-row-dblclick="handleDblclick" :columns="columns" :data="tableData" height="250" :loading="loading"></i-table>
                                </tab-pane>
                                <tab-pane :label="$t('videoback.downloadTask')" name="downloadfile">
                                    <i-table border :columns="downloadColumns" :data="downloadTableData" height="250" :loading="loading"></i-table>
                                </tab-pane>
                                <!-- <i-button @click="switchAudio" size="small" slot="extra" type="info" style="margin-right: 10px;">{{$t('monitor.mute')}}:{{isMute?$t('monitor.open'):$t('monitor.close')}}</i-button>
                                <i-button @click="stopVideo" size="small" slot="extra" type="error">{{$t('videoback.stopPlay')}}</i-button> -->
                            </Tabs>
                        </div>
                    </div>
                </div>
    </div>
    </Layout>
    </Layout>
    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="js/mpegts.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/websocketmgr.js"></script>
    <script src="js/echarts.min.js"></script>
    <script>
        var isZh = utils.locale === 'zh';
        iview.lang(isZh ? 'zh-CN' : 'en-US');
        var totalInterval = 0;
        var startTimes = 0;
        var player = null;
        var chart = null;
        var deviceid = utils.getParameterByName("deviceid");
        var devicename = utils.getParameterByName("devicename");
        var token = utils.getParameterByName("token");
        var starttime = utils.getParameterByName("starttime");
        var endtime = utils.getParameterByName("endtime");
        var isSelectTime = (starttime != "undefined" && endtime != "undefined")
        var startPlayerTimer = null;
        var isRequsetPlaying = false; // 防止连续点击
        var isResize = false;
        var timeDifference = DateFormat.getOffset();
        var gchannel = null,
            gstartTimeStr = null,
            gendTimeStr = null,
            timeReminderElStyle = null,
            timeLineElStyle = null;

        function calcFileSizeM(filesize) {
            var mSize = (filesize / 1024 / 1024).toFixed(2);
            var filesize = null
            if (mSize > 1024) {
                filesize = mSize / 1024 + "G";
            } else {
                filesize = mSize + 'M'
            }
            return filesize;
        };

        function getzf(num) {
            if (parseInt(num) < 10) {
                num = '0' + num;
            }
            return num;
        }
        var lang = new Vue({
            i18n: utils.getI18n()
        });

        document.title = lang.$t('monitor.videoPlayback');
        var vRoot = new Vue({
            el: "#container",
            i18n: utils.getI18n(),
            data: {
                isMute: false,
                isFullScreen: false,
                deviceid: deviceid,
                devicename: devicename,
                networkSpeed: '0KB/S',
                isSpin: false,
                modal: false,
                isTable: 'time',
                loading: false,
                tipModal: false,
                maskEl: null,
                selectType: '1',
                streamType: '0',
                date: isSelectTime ? new Date(DateFormat.longToDateStr(Number(starttime), timeDifference)) : new Date(),
                dateStr: "",
                startValue: '',
                resolvingPower: {
                    width: 0,
                    height: 0,
                },
                endValue: '',
                startVideoTime: '',
                endVideoTime: '',
                timeRange: isSelectTime ? [DateFormat.longToLocalDateTimeStr(Number(starttime)).split(" ")[1], DateFormat.longToLocalDateTimeStr(Number(endtime)).split(" ")[1]] : ["00-00-00", "23-59-59"],
                storageType: 'mainAndBackupStore',
                mediatype: 'all',
                videotppe: true,
                tableData: [],
                downloadTableData: [],
                sliderValue: [0, 100],
                showSlider: false,
                tipFormat: function(value) {
                    var startValue = null;
                    if (totalInterval > 0) {
                        startValue = value;
                        var startInterval = startValue / 100 * totalInterval;
                        var startValue = DateFormat.longToLocalDateTimeStr(startTimes + startInterval).split(' ')[1];
                    }
                    return startValue;
                },
                columns: [{
                    width: 60,
                    type: 'index'
                }, {
                    title: lang.$t('monitor.play'),
                    key: 'action',
                    width: 70,
                    render: function(h, params) {

                        return h('div', {}, [
                            h('Button', {
                                props: {
                                    shape: "circle",
                                    icon: "ios-play"
                                },
                                on: {
                                    click: function() {
                                        vRoot.handleDblclick(params.row);
                                    }
                                }
                            }, null)
                        ])
                    }
                }, {
                    title: lang.$t('videoback.channelNumber'),
                    key: 'channel',
                    width: 120,
                }, {
                    title: lang.$t('videoback.startTime'),
                    key: 'starttime',
                }, {
                    title: lang.$t('videoback.endTime'),
                    key: 'endtime',
                }, {
                    title: lang.$t('videoback.fileSize'),
                    key: 'filesize',
                    width: 100,
                    render: function(h, params) {
                        return h('span', {}, calcFileSizeM(params.row.filesize))
                    }
                }, {
                    title: lang.$t('alarm.action'),
                    key: 'action',
                    width: 180,
                    render: function(h, params) {
                        var row = params.row;
                        return h('div', {}, [
                            h('Button', {
                                props: {
                                    shape: "circle",
                                    icon: "md-arrow-down"
                                },
                                attrs: {
                                    title: lang.$t('videoback.allDownload')
                                },
                                on: {
                                    click: function() {
                                        vRoot.reqUploadFile(row);
                                    }
                                }
                            }, null),
                            h('Button', {
                                style: {
                                    'marginLeft': '10px'
                                },
                                props: {
                                    shape: "circle",
                                    icon: "md-download"
                                },
                                attrs: {
                                    title: lang.$t('videoback.segmentDownload')
                                },
                                on: {
                                    click: function() {
                                        vRoot.dateStr = row.starttime.split(' ')[0];
                                        vRoot.startValue = row.starttime.split(' ')[1];
                                        vRoot.endValue = row.endtime.split(' ')[1];
                                        vRoot.startVideoTime = row.starttime;
                                        vRoot.endVideoTime = row.endtime;
                                        vRoot.row = row;


                                        startTimes = DateFormat.dateTimeStrToLong(row.starttime, 0);
                                        var endTimes = DateFormat.dateTimeStrToLong(row.endtime, 0);
                                        totalInterval = endTimes - startTimes;
                                        vRoot.showSlider = true;
                                        vRoot.sliderValue = [0, 100];
                                        vRoot.timeStamp = utils.timeStamp(totalInterval);
                                        vRoot.modal = true;
                                    }
                                }
                            }, null),
                        ])
                    }
                }],
                downloadColumns: [{
                    title: lang.$t('alarm.action'),
                    width: 165,
                    render: function(h, params) {
                        var row = params.row,
                            index = params.index;
                        return h('div', {}, [

                            h('Tooltip', {
                                props: {
                                    content: lang.$t('videoback.pause'),
                                    placement: 'top',
                                }
                            }, [h('Button', {
                                props: {
                                    size: "small",
                                    icon: "ios-square",
                                    disabled: row.downloadstatus == 3
                                },
                                on: {
                                    click: function() {
                                        var data = {
                                            deviceid: row.deviceid,
                                            action: 0,
                                            downloadtaskid: row.downloadtaskid,
                                            offset: DateFormat.getOffset()
                                        }
                                        vRoot.controlUploadFileFn(data, function(resp) {
                                            vRoot.$Message.success(lang.$t('videoback.pauseSucc'));
                                            vRoot.downloadTableData.splice(index, 1, resp.task);
                                        });
                                    }
                                }
                            }, null)]),
                            h('Tooltip', {
                                props: {
                                    content: lang.$t('videoback.continue'),
                                    placement: 'top',
                                }
                            }, [h('Button', {
                                props: {
                                    size: "small",
                                    icon: "ios-play",
                                    disabled: row.downloadstatus == 3
                                },
                                style: {
                                    'marginLeft': '5px'
                                },
                                on: {
                                    click: function() {
                                        var data = {
                                            deviceid: row.deviceid,
                                            action: 1,
                                            downloadtaskid: row.downloadtaskid
                                        }
                                        vRoot.controlUploadFileFn(data, function(resp) {
                                            vRoot.$Message.success(lang.$t('videoback.continueSucc'));
                                            vRoot.downloadTableData.splice(index, 1, resp.task);
                                        });
                                    }
                                }
                            }, null), ]),
                            h('Tooltip', {
                                props: {
                                    content: lang.$t('videoback.cancel'),
                                    placement: 'top',
                                }
                            }, [h('Button', {
                                props: {
                                    size: "small",
                                    icon: "md-close-circle"
                                },
                                style: {
                                    'marginLeft': '5px'
                                },
                                on: {
                                    click: function() {
                                        var data = {
                                            deviceid: row.deviceid,
                                            action: 2,
                                            downloadtaskid: row.downloadtaskid
                                        };
                                        vRoot.controlUploadFileFn(data, function(resp) {
                                            vRoot.$Message.success(lang.$t('videoback.cancel'));
                                            vRoot.downloadTableData.splice(index, 1);
                                        });
                                    }
                                }
                            }, null)]),
                            h('Tooltip', {
                                props: {
                                    content: lang.$t('videoback.downloadToLocal'),
                                    placement: 'top',
                                }
                            }, [h('Button', {
                                props: {
                                    size: "small",
                                    icon: "md-arrow-down"
                                },
                                style: {
                                    'marginLeft': '5px'
                                },
                                on: {
                                    click: function() {
                                        if (row.downloadstatus != 3) {
                                            vRoot.$Message.error(lang.$t('videoback.downloadTips1'));
                                            return;
                                        };
                                        vRoot.$Message.success(lang.$t('videoback.downloadTips2'));
                                        var ele = document.createElement('a');
                                        ele.setAttribute('href', row.downloadurl); //设置下载文件的url地址
                                        ele.setAttribute('download', 'download'); //用于设置下载文件的文件名
                                        ele.click();
                                    }
                                }
                            }, null)]),

                        ])
                    }
                }, {
                    title: lang.$t('videoback.downloadState'),
                    width: 100,
                    key: 'downloadstatus',
                    render: function(h, params) {
                        var state = '',
                            downloadstatus = params.row.downloadstatus;
                        switch (downloadstatus) {
                            case 0:
                                state = lang.$t('videoback.uploadNotStarted');
                                break;
                            case 1:
                                state = lang.$t('videoback.startUploading');
                                break;
                            case 2:
                                state = lang.$t('videoback.uploadFailed');
                                break;
                            case 3:
                                state = lang.$t('videoback.uploadSucc');
                                break;
                            case 4:
                                state = lang.$t('videoback.pause');
                                break;
                        }
                        return h('span', {}, state);
                    }
                }, {
                    title: lang.$t('videoback.progress'),
                    width: 240,
                    render: function(h, params) {
                        if (params.row.lastupdatetime > 0) {
                            var lastupdatetimeStr = DateFormat.longToLocalDateTimeStr(params.row.lastupdatetime);
                            var currentLength = calcFileSizeM(params.row.currentlength);
                            var needfiLesize = calcFileSizeM(params.row.needfilesize);
                            return h('span', {}, lastupdatetimeStr + " " + currentLength + '/' + needfiLesize);
                        } else {
                            return h('span', {}, '');
                        }

                    }
                }, {
                    title: lang.$t('videoback.label'),
                    key: 'tag',
                    width: 75
                }, {
                    title: lang.$t('videoback.channelNumber'),
                    key: 'channel',
                    width: 65,
                }, {
                    title: lang.$t('videoback.fileStartTime'),
                    key: 'needstarttime'
                }, {
                    title: lang.$t('videoback.fileEndTime'),
                    key: 'needendtime',
                }, {
                    title: lang.$t('videoback.startDownloadTime'),
                    key: 'downloadstarttime',
                    render: function(h, params) {
                        var row = params.row;
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(row.downloadstarttime))
                    }

                }, {
                    title: lang.$t('videoback.endDownloadTime'),
                    key: 'downloadendtime',
                    render: function(h, params) {
                        var row = params.row;
                        return row.downloadendtime ? h('span', {}, DateFormat.longToLocalDateTimeStr(row.downloadendtime)) : '';
                    }
                }],
                timeReminder: '',
                timeReminderElStyle: {},
                timeLineElStyle: {},
                tag: '',
                row: {},
                playerStateTip: '',
                timeStamp: '',
            },
            methods: {
                flv_photograph: function(playerIndex) {
                    var ele = document.createElement('a');
                    var now = DateFormat.format(new Date(), 'yyyy-MM-dd HH:mm:ss');
                    var fileName = this.devicename + '-' + this.selectType + '-' + now;
                    ele.setAttribute('href', this.htmlToImage(playerIndex)); //设置下载文件的url地址
                    ele.setAttribute('download', fileName); //用于设置下载文件的文件名
                    ele.click();
                },
                htmlToImage: function(index) {
                    var canvas = document.getElementById('V2I_canvas');
                    if (!canvas.getContext) {
                        me.$Message.error(me.$t('video.notSupportCanvas'));
                        return false;
                    } else {
                        var context = canvas.getContext("2d");
                        canvas.setAttribute('width', this.resolvingPower.width);
                        canvas.setAttribute('height', this.resolvingPower.height);
                        context.drawImage(document.getElementById('videoElement'), 0, 0, this.resolvingPower.width, this.resolvingPower.height);
                        return canvas.toDataURL("image/png");
                    }
                },
                handleFullScreen: function() {
                    var mapWraper = document.getElementById('videoElementWrap');
                    if (this.isFullScreen) {
                        this.exitFullscreen();
                        this.isFullScreen = false;
                    } else {
                        this.requestFullscreen(mapWraper);
                        this.isFullScreen = true;
                    }
                },
                exitFullscreen: function() {
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                },
                requestFullscreen: function(mapWraper) {
                    if (mapWraper.requestFullscreen) {
                        mapWraper.requestFullscreen()
                    } else if (mapWraper.mozRequestFullScreen) {
                        mapWraper.mozRequestFullScreen()
                    } else if (mapWraper.webkitRequestFullScreen) {
                        mapWraper.webkitRequestFullScreen()
                    } else if (mapWraper.msRequestFullscreen) {
                        mapWraper.msRequestFullscreen()
                    }
                },
                onClearTime: function() {
                    this.timeRange = ["00-00-00", "23-59-59"]
                },
                onSliderChange: function(value) {

                    var startValue = value[0];
                    var endValue = value[1];

                    var startInterval = startValue / 100 * totalInterval;
                    var endInterval = endValue / 100 * totalInterval;

                    vRoot.timeStamp = utils.timeStamp(endInterval - startInterval);
                    this.startValue = DateFormat.longToLocalDateTimeStr(startTimes + startInterval).split(' ')[1];
                    this.endValue = DateFormat.longToLocalDateTimeStr(startTimes + endInterval).split(' ')[1];
                },
                switchAudio: function() {
                    this.isMute = !this.isMute;
                },
                stopVideo: function() {

                    this.destroyPlayer();
                    this.playerStateTip = lang.$t('videoback.stopPlay');

                    var url = myUrls.playRecordControl(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        channel: this.backupSelectType,
                        streamtype: this.backupStreamtype,
                        mediatype: this.backupMediatype,
                        storetype: this.backupStoretype,
                        starttime: gstartTimeStr,
                        endtime: gendTimeStr,
                        playcontrol: 2,
                        offset: DateFormat.getOffset()
                    }, function(resp) {
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            me.$Message.success(isZh ? "停止成功" : "Stopped successfully");
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                        }
                    })
                },
                controlUploadFileFn: function(data, callback) {
                    var url = myUrls.controlUploadFile(),
                        me = this;
                    utils.sendAjax(url, data, function(resp) {
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            callback(resp);
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                        }
                    });
                },
                splitUploadFile: function() {
                    var url = myUrls.reqUploadFile(),
                        me = this;
                    var mediatype = '';
                    if (this.mediatype == 'all') {
                        mediatype = 0;
                    } else if (this.mediatype == 'audio') {
                        mediatype = 1;
                    } else if (this.mediatype == 'video') {
                        mediatype = 2;
                    }
                    var storetype = '';
                    if (this.storageType == 'mainAndBackupStore') {
                        storetype = 0;
                    } else if (this.storageType == 'mainstore') {
                        storetype = 1;
                    } else if (this.storageType == 'backupstore') {
                        storetype = 2;
                    }

                    var needstarttime = this.dateStr + ' ' + this.startValue;
                    var needendtime = this.dateStr + ' ' + this.endValue;
                    if (new Date(needstarttime).getTime() > new Date(needendtime).getTime()) {
                        me.$Message.error(lang.$t('videoback.downloadTips3'));
                        return;
                    }
                    if (new Date(this.row.starttime).getTime() > new Date(needstarttime).getTime()) {
                        me.$Message.error(lang.$t('videoback.downloadTips4'));
                        return;
                    }
                    if (new Date(needendtime).getTime() > new Date(this.row.endtime).getTime()) {
                        me.$Message.error(lang.$t('videoback.downloadTips5'));
                        return;
                    }



                    var data = {
                        deviceid: deviceid,
                        channel: this.backupSelectType,
                        streamtype: this.backupStreamtype,
                        totalstarttime: this.row.starttime,
                        totalendtime: this.row.endtime,
                        totalfilesize: this.row.filesize,
                        needstarttime: needstarttime,
                        needendtime: needendtime,
                        alarmtype: 0,
                        mediatype: this.backupMediatype,
                        storetype: this.backupStoretype,
                        offset: DateFormat.getOffset()
                    };
                    this.tag && (data.tag = this.tag);

                    utils.sendAjax(url, data, function(resp) {
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            me.$Message.success(isZh ? "请求下载成功" : "Download request successful");
                            me.modal = false;
                            me.tag = '';
                            me.queryDownloadTasks();
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                        }
                    });
                },
                reqUploadFile: function(row) {
                    var url = myUrls.reqUploadFile(),
                        me = this;
                    var mediatype = '';
                    if (this.mediatype == 'all') {
                        mediatype = 0;
                    } else if (this.mediatype == 'audio') {
                        mediatype = 1;
                    } else if (this.mediatype == 'video') {
                        mediatype = 2;
                    }
                    var storetype = '';
                    if (this.storageType == 'mainAndBackupStore') {
                        storetype = 0;
                    } else if (this.storageType == 'mainstore') {
                        storetype = 1;
                    } else if (this.storageType == 'backupstore') {
                        storetype = 2;
                    }


                    var data = {
                        deviceid: deviceid,
                        channel: this.backupSelectType,
                        streamtype: this.backupStreamtype,
                        totalstarttime: row.starttime,
                        totalendtime: row.endtime,
                        totalfilesize: row.filesize,
                        needstarttime: row.starttime,
                        needendtime: row.endtime,
                        alarmtype: 0,
                        mediatype: this.backupMediatype,
                        storetype: this.backupStoretype,
                        offset: DateFormat.getOffset()
                    };
                    utils.sendAjax(url, data, function(resp) {
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            me.$Message.success(isZh ? "请求下载成功" : "Download request successful");
                            me.queryDownloadTasks();
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                        }
                    });
                },
                onMouseMove: function(e) {

                    var rect = this.maskEl.getBoundingClientRect();
                    var elWidth = rect.width;
                    var offsetX = e.clientX - rect.left;
                    if (offsetX == elWidth - 1) {
                        offsetX = elWidth;
                    }
                    var currentSecond = offsetX * 24 * 60 * 60 / elWidth;
                    var hours = parseInt(currentSecond / 3600);
                    var remainSeconds = currentSecond - 3600 * hours;
                    var mins = parseInt(remainSeconds / 60);
                    remainSeconds = remainSeconds - mins * 60;
                    // var seconds = parseInt(remainSeconds);
                    var seconds = parseInt((currentSecond % 3600) % 60);
                    this.timeReminder = getzf(hours) + ':' + getzf(mins) + ':' + getzf(seconds);

                    var top = (e.clientY - rect.top - 30);
                    var left = (e.clientX - rect.left);

                    if (top < 0) {
                        top = 0;
                    }

                    if (left > (elWidth - 54)) {
                        left = elWidth - 54;
                    }

                    this.timeReminderElStyle = timeReminderElStyle = {
                        left: left + 'px',
                        top: top + 'px',
                    };

                    this.timeLineElStyle = timeLineElStyle = {
                        left: (e.clientX - rect.left - 1) + 'px',
                    }



                },
                queryDownloadTasks: function() {
                    var url = myUrls.queryDownloadTasks(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        offset: DateFormat.getOffset()
                    }, function(resp) {
                        if (resp.status == 0) {
                            resp.tasks.sort(function(a, b) {
                                return b.downloadstarttime - a.downloadstarttime;
                            });

                            me.downloadTableData = resp.tasks ? resp.tasks : [];
                        }
                    });
                },
                handleClickMask: function() {
                    if (isRequsetPlaying) return;
                    var startTimeStr = DateFormat.format(this.date, 'yyyy-MM-dd') + " " + this.timeReminder;
                    var endTimeStr = null;
                    var channel = null;
                    var startTime = new Date(startTimeStr).getTime();
                    var me = this;

                    this.tableData.forEach(function(item) {
                        var itemStartTime = new Date(item.starttime).getTime();
                        var itemEndTime = new Date(item.endtime).getTime();
                        if (itemStartTime <= startTime && startTime <= itemEndTime) {
                            endTimeStr = item.endtime;
                            channel = item.channel;
                        }
                    })
                    if (endTimeStr) {
                        isRequsetPlaying = true;
                        this.playerStateTip = lang.$t('video.requestPlay');
                        this.isSpin = true;
                        var url = myUrls.playRecordControl();
                        gendTimeStr = endTimeStr;
                        gstartTimeStr = startTimeStr;
                        gchannel = channel;
                        utils.sendAjax(url, {
                            deviceid: deviceid,
                            channel: this.backupSelectType,
                            streamtype: this.backupStreamtype,
                            mediatype: this.backupMediatype,
                            storetype: this.backupStoretype,
                            playrate: 0,
                            playcontrol: 0,
                            starttime: startTimeStr,
                            endtime: endTimeStr,
                            playtype: ishttps ? 'flvs' : 'flv',
                            offset: DateFormat.getOffset()
                        }, function(resp) {
                            me.isSpin = false;
                            isRequsetPlaying = false;
                            var record = resp.record,
                                status = resp.status;
                            var videoUrl = record.playurlvideo;
                            var audioUrl = record.playurlaudio;
                            if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                            } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                            } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                            } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                            } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                            } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                            } else if (status === CMD_SEND_CONFIRMED) {
                                me.$Message.success(lang.$t('video.requestPlaySucc'));
                                if (startPlayerTimer) {
                                    clearTimeout(startPlayerTimer);
                                }
                                me.startTimes = Date.now();
                                me.switchflvPlayer(videoUrl, audioUrl);
                            } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                            } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                me.$Message.error(lang.$t('video.requestPlayTimeout'));
                                if (startPlayerTimer) {
                                    clearTimeout(startPlayerTimer);
                                }
                                if (record) {
                                    me.startTimes = Date.now();
                                    me.switchflvPlayer(videoUrl, audioUrl);
                                }
                            }

                        }, function() {
                            me.isSpin = false;
                            me.$Message.error(lang.$t('message.networkError'));
                        });
                    }
                },
                switchflvPlayer: function(videoUrl, audioUrl) {
                    this.destroyPlayer();
                    this.initVideo(videoUrl);
                    this.initAudio(audioUrl);
                },
                destroyPlayer: function() {
                    if (this.flvPlayer != null) {
                        this.flvPlayer.pause();
                        this.flvPlayer.unload();
                        this.flvPlayer.detachMediaElement();
                        this.flvPlayer.destroy();
                        this.flvPlayer = null;
                    }
                    if (this.audioPlayer != null) {
                        this.audioPlayer.pause();
                        this.audioPlayer.unload();
                        this.audioPlayer.detachMediaElement();
                        this.audioPlayer.destroy();
                        this.audioPlayer = null;
                    }
                },
                // String deviceid;
                // short channel;
                // short playcontrol; //回放控制 0：开始回放 1:暂停回放 2:结束回放3:快进回放4:关键帧快退回放5:拖动回放6：关键帧回放
                // short playrate;                //快进或快退倍数 0：无效 1：1倍 2:2倍 3:4倍 4:8倍 5:16倍
                // String starttime;              //拖动回放位置，回放控制为5时有效
                handleDblclick: function(row) {
                    if (isRequsetPlaying) return;
                    this.isSpin = true;
                    isRequsetPlaying = true;
                    if (startPlayerTimer) {
                        clearTimeout(startPlayerTimer);
                    }
                    this.playerStateTip = lang.$t('video.requestPlay');
                    gendTimeStr = row.endtime;
                    gstartTimeStr = row.starttime;
                    gchannel = row.channel;
                    var url = myUrls.playRecord(),
                        me = this,
                        data = {
                            deviceid: deviceid,
                            channel: this.backupSelectType,
                            streamtype: this.backupStreamtype,
                            mediatype: this.backupMediatype,
                            storetype: this.backupStoretype,
                            starttime: row.starttime,
                            endtime: row.endtime,
                            playtype: ishttps ? 'flvs' : 'flv',
                            offset: DateFormat.getOffset()
                        };

                    utils.sendAjax(url, data, function(resp) {
                        me.isSpin = false;
                        isRequsetPlaying = false;
                        var record = resp.record,
                            status = resp.status;
                        var videoUrl = record.playurlvideo;
                        var audioUrl = record.playurlaudio;

                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            me.$Message.success(lang.$t('video.requestPlaySucc'));
                            if (startPlayerTimer) {
                                clearTimeout(startPlayerTimer);
                            }
                            me.startTimes = Date.now();
                            me.switchflvPlayer(videoUrl, audioUrl);
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(lang.$t('video.requestPlayTimeout'));
                            if (startPlayerTimer) {
                                clearTimeout(startPlayerTimer);
                            }
                            me.startTimes = Date.now();
                            me.switchflvPlayer(videoUrl, audioUrl);
                        }
                    }, function() {
                        me.$Message.error(lang.$t('message.networkError'));
                        me.isSpin = false;
                    });
                },
                queryMedia: function() {

                    if (!(this.date && this.timeRange[0] && this.timeRange[1])) {
                        this.$Message.error(lang.$t('message.plSelectTime'));
                        return;
                    };

                    var storetype = '';
                    if (this.storageType == 'mainAndBackupStore') {
                        storetype = 0;
                    } else if (this.storageType == 'mainstore') {
                        storetype = 1;
                    } else if (this.storageType == 'backupstore') {
                        storetype = 2;
                    }

                    var mediatype = '';
                    if (this.mediatype == 'all') {
                        mediatype = 0;
                    } else if (this.mediatype == 'audio') {
                        mediatype = 1;
                    } else if (this.mediatype == 'video') {
                        mediatype = 2;
                    }

                    var url = myUrls.queryMediaList(),
                        that = this,
                        dateStr = DateFormat.format(this.date, 'yyyy-MM-dd'),
                        data = {
                            deviceid: deviceid,
                            channel: Number(this.selectType), //需要查询的通道号
                            streamtype: Number(this.streamType),
                            starttime: (dateStr + ' ' + this.timeRange[0]), //开始时间YY-MM-DD-HH-MM-SS
                            endtime: (dateStr + ' ' + this.timeRange[1]), //结束时间YY-MM-DD-HH-MM-SS
                            mediatype: mediatype, //资源类型     0：音视频 1音频 2视频 3视频或者音视频
                            storetype: storetype,
                            offset: DateFormat.getOffset()
                        };
                    that.loading = true;
                    utils.sendAjax(url, data, function(respData) {
                        var status = respData.status;
                        var records = respData.records;
                        var isSucc = false;
                        that.loading = false;
                        that.backupSelectType = data.channel;
                        that.backupStreamtype = data.streamtype;
                        that.backupMediatype = data.mediatype;
                        that.backupStoretype = data.storetype;

                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            if (records && records.length) {
                                isSucc = true;
                            } else {
                                that.$Message.error(lang.$t('activeSafety.noData'));
                            }
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            that.$Message.error(lang.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                        }

                        if (isSucc) {
                            that.$Message.success(lang.$t('monitor.querySucc'));
                            records.sort(function(a, b) {
                                return DateFormat.dateStrToLong(b.starttime, timeDifference) - DateFormat.dateStrToLong(a.starttime, timeDifference);
                            });
                            records.forEach(function(item, index) {
                                item.index = ++index;
                            });
                            that.tableData = records;
                        } else {
                            that.tableData = [];
                        }
                    })
                },
                initVideo: function(url) {
                    this.flvPlayer = mpegts.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        hasAudio: false,
                        hasVideo: true,
                    }, {
                        enableStashBuffer: !1,
                        fixAudioTimestampGap: !1,
                        liveBufferLatencyChasing: false,
                    });


                    this.flvPlayer.attachMediaElement(player);
                    this.flvPlayer.load(); //加载
                    this.flvPlayer.play(); // canplay;
                    var me = this;
                    this.flvPlayer.on(mpegts.Events.STATISTICS_INFO, function(e) {
                        me.networkSpeed = parseInt(e.speed * 10) / 10 + 'KB/S';
                    })
                },
                initAudio: function(url) {
                    this.audioPlayer = mpegts.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        hasAudio: true,
                        hasVideo: false,
                    }, {
                        // enableWorker: true,
                        // lazyLoadMaxDuration: 3 * 60,
                        // seekType: 'range',
                        // liveBufferLatencyChasing: true,
                        enableStashBuffer: !1,
                        stashInitialSize: 128,
                        fixAudioTimestampGap: !1
                    });

                    this.audioPlayer.attachMediaElement(this.$refs.audio);
                    this.audioPlayer.load(); //加载
                    this.audioPlayer.play(); // canplay;
                },
                initChart: function() {
                    chart = echarts.init(document.getElementById('videoTime'));
                    chart.setOption(this.getEchartOption(DateFormat.format(this.date, 'yyyy-MM-dd'), []), true);
                },
                getEchartOption: function(dateStr, data) {
                    console.log('data', data);
                    var colors = ['#e4393c']; //三种状态的颜色
                    var state = [lang.$t('monitor.video')]; //三种状态  
                    dateStr = dateStr.replace('-', '/').replace('-', '/');

                    // echart配置
                    return {
                        color: colors,
                        tooltip: { //提示框
                            formatter: function(params) {
                                    return params.name + ':' + params.value[1] + '~' + params.value[2];
                                } //数据的值
                        },
                        legend: { //图例
                            data: state,
                            bottom: '1%',
                            selectedMode: false, // 图例设为不可点击
                            textStyle: {
                                color: '#000'
                            }
                        },
                        grid: { //绘图网格
                            left: '10',
                            right: '15',
                            top: '10',
                            bottom: '10%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'time',
                            interval: 3600 * 1000, //以一个小时递增 
                            min: dateStr + ' 00:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
                            max: dateStr + ' 24:00',
                            axisLabel: {
                                formatter: function(value, index) {
                                    var date = new Date(value);
                                    if (index === 24) {
                                        return '24:00';
                                    }
                                    return getzf(date.getHours()) + ':00';

                                    function getzf(num) {
                                        if (parseInt(num) < 10) {
                                            num = '0' + num;
                                        }
                                        return num;
                                    }
                                },
                            }
                        },
                        yAxis: {
                            data: ['']
                        },
                        series: [{
                            type: 'custom',
                            renderItem: function(params, api) { //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                                var end = api.coord([api.value(2), categoryIndex]);
                                var height = api.size([0, 1])[1];

                                return {
                                    type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                                    shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                                        x: start[0],
                                        y: start[1] - height / 2,
                                        width: end[0] - start[0] + 1,
                                        height: height
                                    }, { // 当前坐标系的包围盒。
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    }),
                                    style: api.style()
                                };
                            },
                            encode: {
                                x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
                                y: 0 // data 中『维度0』对应到 Y 轴
                            },
                            data: data
                                //     [

                            //     {
                            //         itemStyle: { normal: { color: colors[0] } },//条形颜色
                            //         name: '视频',
                            //         value: [0, '2019/10/01 01:28:00', '2019/10/01 05:59:12']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                            //     },

                            //     {
                            //         itemStyle: { normal: { color: colors[0] } },
                            //         name: '视频',
                            //         value: [0, '2019/10/01 06:13:12', '2019/10/01 08:22:14']
                            //     },


                            // ]
                        }]
                    };
                },
                onWindowResize: function() {
                    var videoContent = this.$refs.videoContent,
                        that = this;
                    window.onresize = function() {
                        if (that.isTable === 'time') {
                            chart.resize();
                        } else {
                            isResize = true;
                        }

                    }
                },
                initWebSocket: function() {
                    var me = this;
                    initWebSocket(wsHost, localStorage.getItem('name') + "-download", function(data) {
                        var action = data.action;
                        if (action === "downloadprogress") {
                            console.log('push downloadprogress - ', Date.now());
                            return;
                            var downloadtask = data.downloadtask;
                            var tasksn = downloadtask.tasksn;

                            if (deviceid == downloadtask.deviceid) {
                                var isFound = false;
                                for (var i = 0; i < me.downloadTableData.length; i++) {
                                    var itemTasksn = me.downloadTableData[i].tasksn;
                                    if (tasksn == itemTasksn) {
                                        isFound = true;
                                        me.downloadTableData[i].lastupdatetime = downloadtask.lastupdatetime;
                                        me.downloadTableData[i].currentlength = downloadtask.currentlength;
                                        break;
                                    }
                                }
                                if (isFound == false) {
                                    me.downloadTableData.push(downloadtask);
                                }

                            }

                        };
                    })
                },
                changeIsFullMapIcon: function() {
                    var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                    isFullscreen = !!isFullscreen;
                    return isFullscreen;
                },
            },
            watch: {
                isTable: function(newVal) {
                    // var me = this;
                    // if (newVal === 'time') {
                    //     me.timeReminderElStyle = timeReminderElStyle;
                    //     me.timeLineElStyle = timeLineElStyle;
                    //     setTimeout(function() {
                    //         chart = echarts.init(document.getElementById('videoTime'));
                    //         var data = [];
                    //         me.tableData.forEach(function(item) {
                    //             var starttimeStr = item.starttime.replace('-', '/').replace('-', '/');
                    //             var endtimeStr = item.endtime.replace('-', '/').replace('-', '/');
                    //             data.push({
                    //                 itemStyle: {
                    //                     normal: {
                    //                         color: '#e4393c'
                    //                     }
                    //                 },
                    //                 name: '',
                    //                 value: [0, starttimeStr, endtimeStr]
                    //             })
                    //         })
                    //         chart.setOption(me.getEchartOption(DateFormat.format(me.date, 'yyyy-MM-dd'), data));

                    //     }, 300);
                    // }
                },
                modal: function(newVal) {
                    if (!newVal) {
                        this.showSlider = false;
                    }
                },
                tableData: function(newVal) {
                    if (newVal.length) {
                        var data = [];
                        newVal.forEach(function(item) {
                            var starttimeStr = item.starttime.replace('-', '/').replace('-', '/');
                            var endtimeStr = item.endtime.replace('-', '/').replace('-', '/');
                            data.push({
                                itemStyle: {
                                    normal: {
                                        color: '#e4393c'
                                    }
                                },
                                name: '',
                                value: [0, starttimeStr, endtimeStr]
                            })
                        })

                        chart.setOption(this.getEchartOption(DateFormat.format(this.date, 'yyyy-MM-dd'), data), true);
                    } else {
                        chart.setOption(this.getEchartOption(DateFormat.format(this.date, 'yyyy-MM-dd'), []), true);
                    }
                }
            },
            mounted: function() {
                var that = this;
                // if (!fls.f) {
                //     this.tipModal = true;
                // }
                this.flvPlayer = null;
                that.$nextTick(function() {
                    player = document.getElementById('videoElement');
                    player.addEventListener('loadedmetadata', function(e) {
                        that.resolvingPower = {
                            width: e.target.videoWidth,
                            height: e.target.videoHeight,
                        }
                    })
                    player.addEventListener('error', function() {
                        that.playerStateTip = lang.$t('video.error');
                    });
                    player.addEventListener('loadedmetadata', function(e) {
                        console.log(e.target.videoWidth, e.target.videoHeight);
                    });
                    player.addEventListener('play', function() {
                        that.playerStateTip = lang.$t('video.play');
                    });
                    player.addEventListener('playing', function() {
                        that.playerStateTip = lang.$t('video.playing');
                    });
                    player.addEventListener('pause', function() {
                        that.playerStateTip = lang.$t('video.pause');
                        that.startTimes = null;
                    });
                    player.addEventListener('waiting', function() {
                        that.playerStateTip = lang.$t('video.waiting');
                    });
                    that.initChart();
                    that.onWindowResize();
                    that.maskEl = that.$refs.videoTimeMask;

                    document.getElementById('mask-wrapper').style.display = 'none';

                    that.queryDownloadTasks();

                    var interval = 0;

                    that.startTimes = null;

                    setInterval(function() {

                        if (that.isTable == 'downloadfile' && interval >= 10) {
                            that.queryDownloadTasks();
                            interval = 0;
                        }

                        interval++;
                        var nowTime = Date.now();

                        if (that.startTimes != null && (nowTime - that.startTimes) > 1000 * 60 * 3) {
                            if (that.flvPlayer) {
                                that.flvPlayer.pause();
                                that.flvPlayer.unload();
                                setTimeout(function() {
                                    that.startTimes = null;
                                    that.playerStateTip = that.$t('video.threeMinutes');
                                }, 1000)
                            }
                        }
                    }, 1000)

                    that.initWebSocket();


                    document.addEventListener('fullscreenchange', function() {
                        that.isFullScreen = that.changeIsFullMapIcon();
                    })
                    document.addEventListener('mozfullscreenchange', function() {
                        that.isFullScreen = that.changeIsFullMapIcon();
                    })
                    document.addEventListener('webkitfullscreenchange', function() {
                        that.isFullScreen = that.changeIsFullMapIcon();
                    })
                    document.addEventListener('msfullscreenchange', function() {
                        that.isFullScreen = that.changeIsFullMapIcon();
                    })
                });
            },
        })
    </script>
</body>

</html>.